<template>
  <div>
    <WorkOrderHeader flowType="version"/>
    <div style="bottom: 64px;top: 84px;position: fixed;background-color: #faf9ff; z-index: 1000">
      <div style="padding:20px 20px 0 20px;">
        <div class="message-box-txt-title">
          <img src="@/assets/image/robot_avatar.png" alt="图片" style="width: 20%" @click="gotoShuZhiRen"/>
          <div class="message_box_title">
            <div>
              <span style="font-size: 18px; margin: 5px 0;">
                “红小智”党建数字员工&nbsp;
              </span>
              <span class="app_version">2.0.0</span>
            </div>

            <span style="font-weight: normal; font-size: 15px">版本说明如下</span>
          </div>
        </div>

        <div class="message-box-div-ul">
          <div class="message_box_circle-left"></div>
          <div class="message_box_circle-right"></div>
          <ul class="message-box-txt-ul">
            <li class="message-box-txt">实现党建领域数字员工应用整体框架，并提供日历形式通知提醒、党史今日等实用功能。</li>
            <li class="message-box-txt">建设智查版块，实现党员党组织信息在线问答查阅。</li>
            <li class="message-box-txt">建设智学版块，实现党务相关知识在线问答查阅。</li>
            <li class="message-box-txt">建设智办版块，为党务干事提供包括任务派发、用章审批、党费稽核、党务会议智能巡检、会议签到等在内的实用工作工具。</li>
            <li class="message-box-txt">建设智说版块，集成党建服务直通车。</li>
          </ul>
        </div>

      </div>
      <div class="user_seal_apply_footer" >
        <div class="seal_work-bts-cls">
          <button @click="backBtn()">
            返回
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WorkOrderHeader from '../components/home/workOrder/WorkOrderHeader'

export default {
  name: "version",
  components: {
    WorkOrderHeader,
  },
  data() {
    return {
    }
  },
  methods: {
    backBtn(){
       this.$router.back();
    },
    gotoShuZhiRen() {
      const param = qs.stringify({
        userId: this.$store.state.userInfo.userID,
        empNum: this.$store.state.userInfo.userIdCard,
        mxhookfetch: false
      });
      // 因为VUE_APP_SZR_URL中存在#号，从而不能直接用 new URL 来构建链接地址。
      const url = AesGcm.decrypt(process.env.VUE_APP_SZR_URL) + param;
      MXCommon.openUrlPage(url.toString());
    },
  }
}
</script>
<style>

.message_box_title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
}

.message-box-txt-title{
  font-size: 16px !important;
  line-height: 1.5em;
  padding: 15px 25px;

  background-color: #fdeded;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  box-shadow: 0 0 6px rgb(145 43 43 / 12%);

  font-weight: bold;
  display: flex;
}

.message-box-div-ul li::marker {
  color: red;
}

.message_box_circle-left {
  border-radius: 0 10px 10px 0;
  width: 20px;
  height: 20px;
  background: #faf9ff;
  position: relative;
  left: -10px;
  top: -20px;
  float: left;
  box-shadow: -2px 0px 0px rgb(145 43 43 / 6%) inset;
}

.message_box_circle-right {
  border-radius: 10px 0 0 10px;
  width: 20px;
  height: 20px;
  background: #faf9ff;
  position: relative;
  right: -2%;
  top: -20px;
  float: right;
  box-shadow: 2px 0px 0px rgb(145 43 43 / 9%) inset;
}

.message-box-div-ul {
  background-color: white;
  padding: 10px 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 6px rgb(145 43 43 / 12%);
}

.message-box-txt-ul {
  margin: 0 20px;
}

.app_version {
  color: white;
  background-color: red;
  padding: 4px 10px;
  border-radius: 10px 10px 10px 0px;
  font-size: 13px;
  font-weight: normal;
  position: relative;
  top: -4px;
}

  .message-box-txt{
    font-size: 16px !important;
    margin-left: 12px !important;
    line-height: 1.5em;
    padding-bottom: 5px;
    list-style-type: disc;
  }
  .user_seal_apply_footer {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    height: 4em;
    box-shadow: 0 0 23px rgb(145 43 43 / 12%);
  }
  .user_seal_apply_footer  button {
    padding: 0.5em 1em;
    width: 60%;
    margin: 0.7em;
    background-color: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #ED2439;
    color: #ED2439;
  }
  .user_seal_apply_footer .seal_work-bts-cls {
    display: flex;
    justify-content: center;
  }
</style>
